<template>
  <div>
    <el-card style="max-width: 60vw; margin-left: 12vw;margin-top: 5vw;">
      <div
        style="
          text-align: center;
          font-size: 2vw;
          font-weight: bold;
          margin-bottom: 1vw;
          margin-top: 1.8vw;
        "
      >
        工作人员注册入口
      </div>
      <el-form :model="form" label-width="auto" style="max-width: 600px;margin-left: 16vw;margin-top: 3vw; height:15vw">
        <el-form-item label="账户姓名:" style="margin-left: -0.7vw;height: 3vw;">
          <el-input
            v-model="form.userName"
            style="width: 20vw; margin-left: 0.7vw;height: 2.5vw;"
          />
        </el-form-item>
        <el-form-item label="账户密码：" style="height: 3vw;">
          <el-input
            v-model="form.password"
            show-password
            style="width: 20vw;height: 2.5vw;"
          />
        </el-form-item>

        <el-form-item style="margin-left: 3vw;margin-top: 3vw;">
          <el-button type="primary" @click="onSubmit" style="width: 20vw;height: 3vw;"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref,inject } from "vue";

const axios = inject("axios")
const updateState = ref('')
const form = ref({
  userName: "",
  password: "",
  role: "工作人员",
});

const onSubmit = async () => {
  if (form.value.userName == "" || form.value.password == "") {
    ElMessage({
      message: "注册信息失败，请输入完整的信息！",
      type: "error",
      plain: true,
    });
  } else {
    await axios
      .post("Admin/newUserInfo", {
        userName: form.value.userName,
        role: form.value.role,
        password: form.value.password,
      })
      .then((response) => {
        updateState.value = response.data;
        console.log(updateState.value);
      })
      .catch((error) => {
        console.log(error);
      });

    if (updateState.value == 1) {
      ElMessage({
        message: "注册信息成功！",
        type: "success",
        plain: true,
      });
      updateState.value = 0;
    } else {
      ElMessage({
        message: "注册信息失败！",
        type: "error",
        plain: true,
      });
    }
  }
};

</script>

<style scoped>
</style>